<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>航空票务查询及订票系统</title>

    <!-- Custom fonts for this template -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/google-font.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/sb-admin-2.min.css}" rel="stylesheet">

    <!-- Custom styles for this page -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">
    <style>
        #content{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: url(/img/bg1.jpg)  no-repeat center 0px;
            background-size: cover;
            background-position: center 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size: cover;
            min-height: 780px;
        }
    </style>
</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content" >

            <!-- 顶部栏 -->
            <nav th:replace="~{commons/commons::topBar}"></nav>
            <!-- 顶部栏结束 -->
            <div class="container ">

                <div class="card shadow mb-4 o-hidden border-0 shadow-lg my-5">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">航班查询</h6>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a id="byCityTab" class="nav-link active" data-toggle="tab" href="#byCity">按城市查询</a>
                            </li>
                            <li class="nav-item">
                                <a id="byFlightNoTab" class="nav-link" data-toggle="tab" href="#byFilghtNo">按航班号查询</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div id="byCity" class="container tab-pane active"><br>
                                <form class="user" th:action="@{/queryByCity}" method="get">
                                    <div class="form-group row ">
                                        <div class="col-sm-3 mb-3 mb-sm-0" >
                                            <select id="startCity" name="start" class="form-control" title="出发城市" required>
                                                <option  th:each="city : ${cities}" th:value="${city.cityID}"
                                                         th:text="${city.cityName}"></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3 mb-3 mb-sm-0">
                                            <select id="endCity" name="end" class="form-control" title="目的城市" required>
                                                <option th:each="city : ${cities}" th:value="${city.cityID}"
                                                        th:text="${city.cityName}"></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3">
                                            <input name="date" type="date" class="form-control"
                                                   th:value="${#dates.format(date,'yyyy-MM-dd')}" required>
                                        </div>
                                        <div class="col-sm-3">
                                            <button type="submit" class="btn btn-primary btn-block">查询</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="byFilghtNo" class="container tab-pane fade" ><br>
                                <form th:action="@{/queryByFlightNo}" method="get">
                                    <div class="form-group row ">
                                        <div class="col-sm-4 mb-3 mb-sm-0">
                                            <input name="flightNo" type="text" class="form-control" placeholder="请输入航班号..."
                                                   th:value="${flightNo}">
                                        </div>

                                        <div class="col-sm-4">
                                            <input name="date" type="date" class="form-control"
                                                   th:value="${#dates.format(date,'yyyy-MM-dd')}" required>
                                        </div>
                                        <div class="col-sm-3">
                                            <button type="submit" class="btn btn-primary btn-block">查询</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>

                    </div>
                </div>


                <div th:if="${list} != null" class="card shadow mb-4" >
                    <div class="card-header py-3">

                        <h6 class="m-0 font-weight-bold text-primary">查询结果</h6>
<!--                        <ul class="nav">-->
<!--                            <li class="nav-item">-->
<!--                                <a class="nav-link" th:href="@{/queryByFlightNo(flightNo=${flightNo},date=${#dates.format(date,'yyyy-MM-dd')})}" th:text="${#dates.format(date,'yyyy-MM-dd')}"></a>-->
<!--                            </li>-->
<!--                            <li class="nav-item">-->
<!--                                <a class="nav-link" th:href="@{/queryByFlightNo(flightNo=${flightNo},date=${#dates.format(dates,'yyyy-MM-dd')})}" th:text="${#dates.format(date,'yyyy-MM-dd')}"></a>-->
<!--                            </li>-->
<!--                        </ul>-->
                    </div>
                    <div class="card-body">
                        <div th:if="${#lists.isEmpty(list)}" class="text-center">
                            很抱歉，您搜索的航班已售完。
                        </div>
                        <div th:each="flight : ${list}" class="card border-left-primary shadow h-100 py-2 my-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col-2">
                                        <div class="font-weight-bold text-primary text-left">
                                            <p th:text="${flight.flightNo}" ></p>
                                            <p><small th:text="${flight.aircraftModel}"></small></p>
                                        </div>
                                    </div>
                                    <!--                        <span class="col-1 border-left-primary"></span>-->
                                    <div class="col-10 row ">
                            <span class="col-3 text-center">
                                <p ><i class="fas fa-plane-departure"></i>&nbsp;&nbsp; <strong th:text="${#dates.format(flight.depTimePlan,'MM-dd HH:mm')}"></strong></p>
                                <p th:text="${flight.depTerminal.airportName}"></p>
                            </span>
                                        <span class="col-1 text-center">
                                <i class="fas fa-angle-double-right"></i><i class="fas fa-angle-double-right"></i>
                            </span>
                                        <span class="col-3 text-center">
                                <p><i class="fas fa-plane-arrival"></i>&nbsp;&nbsp; <strong th:text="${#dates.format(flight.arrTimePlan,'MM-dd HH:mm')}"></strong></p>
                                <p th:text="${flight.arrTerminal.airportName}"></p>
                            </span>
                                        <span class="col-2 text-warning">
                                <i class="fas fa-yen-sign"></i><strong class="text-left" th:text="${flight.executionPrice}"></strong>
                            </span>
                                        <span class="col-2">
                                <div class="font-weight-bold text-primary">
                                    <button class="btn-sm btn-info btn-user btn-block" data-toggle="collapse" th:data-target="'#collapse'+${flight.flightID}">订票</button>
                                </div>
                                </span>
                                    </div>

                                </div>
                            </div>
                            <div th:id="'collapse'+${flight.flightID}" class="collapse card-footer">
                                <div th:each="ticketType : ${flight.ticketTypes}">
                                    <div class="row">
                                        <span class="col-3 text-lg-left" th:text="${ticketType.cabin}">经济舱</span>
                                        <span class="col-2 text-lg-left">改退签规则 <i class="fas fa-info-circle" data-toggle="tooltip" data-placement="bottom" th:title="${ticketType.changeWithdrawalRules}+'&#10;行李限重：'+${ticketType.luggageLimit}"></i></span>
                                        <span class="col-2 text-lg-center" >
                                <i class="fas fa-yen-sign"></i><strong class="text-left" th:text="${ticketType.basicPrice}"></strong>
                            </span>
                                        <span class="col-2 text-lg-center" >
                                <i>余票：</i><strong class="text-left" th:text="${ticketType.remainingTickets}"></strong>
                            </span>
                                        <span class="col-3">

                                            <a th:href="@{/book(ticketTypeID=${ticketType.ticketTypeID})}" target="_blank" class="btn-sm btn-info btn-user">预订</a>
                                        </span>
                                    </div>
                                    <hr/>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Main Content -->
        <!-- 页脚 -->
        <footer th:replace="~{commons/commons::footer}"></footer>
        <!-- 页脚结束 -->
    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- 模态框 -->
<div th:replace="~{commons/commons::tmpModal}"></div>

<div class="alert"></div>
<!-- Bootstrap core JavaScript-->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
</script>

<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

<!-- Core plugin JavaScript-->
<script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

<!-- Custom scripts for all pages-->
<script th:src="@{/js/sb-admin-2.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var flightNo = /*[[${flightNo}]]*/ '';
    var start = /*[[${start}]]*/ '';
    var end = /*[[${end}]]*/ '';
    /*]]>*/
    if(flightNo)
        $("#byFlightNoTab").click();
    else
        $("byCityTab").click();
    $("#startCity").val(start);
    $("#endCity").val(end);

</script>

<script>

</script>
</body>

</html>
